@model DetailsCustomerViewModel

@{
	ViewBag.Title = Resources.Shared.AppName + " - " + string.Format(Resources.Shared.DetailsViewTitle, Model.IdentityDescription);
}

<div class="view-container">
  <div class="view-header-container">
    <h2 class="view-header">@string.Format(Resources.Shared.DetailsViewTitle, Model.IdentityDescription)</h2>
  </div>

  <!-- Top buttons -->
  <div class="view-button-container top-button-container">
    <input type="button" class="button back-button" title="@Resources.Shared.Back" onclick="window.location='@Url.Action("Index", "Customer")'"/>
  </div>
  <!-- Detail begin -->
  <div class="entity-form-container">
    <fieldset>
	  <legend>@Resources.CustomerResources.Customer</legend>
	  <div class="form">
			<div class="field">
			  <div class="label">
				<b>
				  @Html.Label(Resources.CustomerResources.FirstName):
				</b>
			  </div>
			  <div class="editor">
				@Html.DisplayFor(model => model.FirstName)
			  </div>
			</div>
			<div class="field">
			  <div class="label">
				<b>
				  @Html.Label(Resources.CustomerResources.LastName):
				</b>
			  </div>
			  <div class="editor">
				@Html.DisplayFor(model => model.LastName)
			  </div>
			</div>
			<div class="field">
			  <div class="label">
				<b>
				  @Html.Label(Resources.CustomerResources.Email):
				</b>
			  </div>
			  <div class="editor">
				@Html.DisplayFor(model => model.Email)
			  </div>
			</div>
			<div class="field">
			  <div class="label">
				<b>
				   @Html.Label(Resources.CustomerResources.IsInactive):
				</b>
			  </div>
			  <div class="editor">
				   @Html.DisplayFor(model => model.IsInactive)
			  </div>
			</div>
		</div>
      </fieldset>
    </div>
	<!-- Detail end -->
	<!-- Tab strip begin -->
    <div id="CustomerTab-container">
      <ul>
        <li>
		  <span class="tab_outer">
            <span class="tab_inner">
			  <a href="#reviewsTab">@Resources.CustomerResources.Reviews</a></li>
			</span>
          </span>
		</li>
        <li>
		  <span class="tab_outer">
            <span class="tab_inner">
			  <a href="#ordersTab">@Resources.CustomerResources.Orders</a></li>
			</span>
          </span>
		</li>
        <li>
		  <span class="tab_outer">
            <span class="tab_inner">
			  <a href="#addressesTab">@Resources.CustomerResources.Addresses</a></li>
			</span>
          </span>
		</li>
      </ul>
	  <!-- Reviews Tab begin -->
      <div id="reviewsTab">
        <!-- Grid begin -->
        <div class="grid-view-container">
		  <div class="grid-top-buttons">
		  	<input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportReviews", "Customer")?masterId=@Model.Id';" />
		  </div>
		  <div class="grid-separator">
		  </div>		
          <div class="grid-view-panel">
			<table id="ReviewsGrid"></table>
          </div>
		  <div class="grid-separator">
		  </div>
		  <div class="grid-view-count">
            <span>@(Resources.Shared.GridTotal)<span id="ReviewsGrid-total-count" class="count-number"></span></span>    
          </div>
        </div>
        <!-- Grid end -->
        
      </div>
	  <!-- Reviews Tab end -->
	  <!-- Orders Tab begin -->
      <div id="ordersTab">
        <!-- Grid begin -->
        <div class="grid-view-container">
		  <div class="grid-top-buttons">
		  	<input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportOrders", "Customer")?masterId=@Model.Id';" />
		  </div>
		  <div class="grid-separator">
		  </div>		
          <div class="grid-view-panel">
			<table id="OrdersGrid"></table>
          </div>
		  <div class="grid-separator">
		  </div>
		  <div class="grid-view-count">
            <span>@(Resources.Shared.GridTotal)<span id="OrdersGrid-total-count" class="count-number"></span></span>    
          </div>
        </div>
        <!-- Grid end -->
        
      </div>
	  <!-- Orders Tab end -->
	  <!-- Addresses Tab begin -->
      <div id="addressesTab">
        <!-- Grid begin -->
        <div class="grid-view-container">
		  <div class="grid-top-buttons">
		  	<input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportAddresses", "Customer")?masterId=@Model.Id';" />
		  </div>
		  <div class="grid-separator">
		  </div>		
          <div class="grid-view-panel">
			<table id="AddressesGrid"></table>
          </div>
		  <div class="grid-separator">
		  </div>
		  <div class="grid-view-count">
            <span>@(Resources.Shared.GridTotal)<span id="AddressesGrid-total-count" class="count-number"></span></span>    
          </div>
        </div>
        <!-- Grid end -->
        
      </div>
	  <!-- Addresses Tab end -->
    </div>
    <!-- Tab strip end -->
 
</div>
@section scripts{
<script type="text/javascript">

$("#CustomerTab-container" ).tabs({
	show: function (event, ui) {
			if(ui.index == 0)
			{
				$("#ReviewsGrid").jqGrid({
					url: '@Url.Action("LoadReviews", "Customer")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					colNames: ['Date', 'Rating', 'Comment'],
					colModel: [
					{ index: 'Date', name: 'Date', sortable: false, resizable: false},
					{ index: 'Rating', name: 'Rating', sortable: false, resizable: false},
					{ index: 'Comment', name: 'Comment', sortable: false, resizable: false},
					],
					gridComplete: 	
						function(){ 
							$("#ReviewsGrid").jqGrid('setLabel', 'Date', '@Resources.ReviewResources.Date', 'grid-header-data', '');
							$("#ReviewsGrid").jqGrid('setLabel', 'Rating', '@Resources.ReviewResources.Rating', 'grid-header-data', '');
							$("#ReviewsGrid").jqGrid('setLabel', 'Comment', '@Resources.ReviewResources.Comment', 'grid-header-data', '');
							$("#ReviewsGrid").jqGrid('setLabel', 'Product', '@Resources.ReviewResources.Product', 'grid-header-data', '');
							
							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize("ReviewsGrid");
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("ReviewsGrid", data.records);
						}
				});
			}
			if(ui.index == 1)
			{
				$("#OrdersGrid").jqGrid({
					url: '@Url.Action("LoadOrders", "Customer")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					colNames: ['Reference', 'Date', 'ShippingCost'],
					colModel: [
					{ index: 'Reference', name: 'Reference', sortable: false, resizable: false},
					{ index: 'Date', name: 'Date', sortable: false, resizable: false},
					{ index: 'ShippingCost', name: 'ShippingCost', sortable: false, resizable: false},
					],
					gridComplete: 	
						function(){ 
							$("#OrdersGrid").jqGrid('setLabel', 'Reference', '@Resources.OrderResources.Reference', 'grid-header-data', '');
							$("#OrdersGrid").jqGrid('setLabel', 'Date', '@Resources.OrderResources.Date', 'grid-header-data', '');
							$("#OrdersGrid").jqGrid('setLabel', 'ShippingCost', '@Resources.OrderResources.ShippingCost', 'grid-header-data', '');
							$("#OrdersGrid").jqGrid('setLabel', 'OrderState', '@Resources.OrderResources.OrderState', 'grid-header-data', '');
							
							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize("OrdersGrid");
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("OrdersGrid", data.records);
						}
				});
			}
			if(ui.index == 2)
			{
				$("#AddressesGrid").jqGrid({
					url: '@Url.Action("LoadAddresses", "Customer")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					colNames: ['AddressLine1', 'AddressLine2', 'City', 'StateProvince', 'PostalCode', 'Country', 'IsBilling'],
					colModel: [
					{ index: 'AddressLine1', name: 'AddressLine1', sortable: false, resizable: false},
					{ index: 'AddressLine2', name: 'AddressLine2', sortable: false, resizable: false},
					{ index: 'City', name: 'City', sortable: false, resizable: false},
					{ index: 'StateProvince', name: 'StateProvince', sortable: false, resizable: false},
					{ index: 'PostalCode', name: 'PostalCode', sortable: false, resizable: false},
					{ index: 'Country', name: 'Country', sortable: false, resizable: false},
					{ index: 'IsBilling', name: 'IsBilling', sortable: false, resizable: false},
					],
					gridComplete: 	
						function(){ 
							$("#AddressesGrid").jqGrid('setLabel', 'AddressLine1', '@Resources.AddressResources.AddressLine1', 'grid-header-data', '');
							$("#AddressesGrid").jqGrid('setLabel', 'AddressLine2', '@Resources.AddressResources.AddressLine2', 'grid-header-data', '');
							$("#AddressesGrid").jqGrid('setLabel', 'City', '@Resources.AddressResources.City', 'grid-header-data', '');
							$("#AddressesGrid").jqGrid('setLabel', 'StateProvince', '@Resources.AddressResources.StateProvince', 'grid-header-data', '');
							$("#AddressesGrid").jqGrid('setLabel', 'PostalCode', '@Resources.AddressResources.PostalCode', 'grid-header-data', '');
							$("#AddressesGrid").jqGrid('setLabel', 'Country', '@Resources.AddressResources.Country', 'grid-header-data', '');
							$("#AddressesGrid").jqGrid('setLabel', 'IsBilling', '@Resources.AddressResources.IsBilling', 'grid-header-data', '');
							
							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize("AddressesGrid");
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("AddressesGrid", data.records);
						}
				});
			}
	}
});
</script>
}
